<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<link rel="stylesheet" href="/css/layui.css" />
<script type="text/javascript" src="/static/js/layui.js"></script>
<link rel="stylesheet" href="/css/1.css" />

<body>
  <div class="top">
    <div class="top-left">
      <img src="iconf/two.png" alt="">
    </div>
    <div class="top-main">
      <input type="text" placeholder="搜索你想要了解的论文">
      <div class="top-main-img">
        <img src="iconf/照相机.png" alt="">
      </div>
      <input type="submit" value="搜索">
    </div>
    <div class="top-right">
      <ul>
        <li>邀请解锁</li>
        <li>客户端</li>
        <li>新手指引</li>
        <li>登录/注册</li>
      </ul>
    </div>
  </div>
  <div class="layui-tab">
    <div class="layui-tab-left">
      <span>目录</span>
      <ul class="layui-tab-title">
        <li class="layui-this">关于我们</li>
        <li>联系我们</li>
      </ul>
    </div>
    <!-- 盒子的内容直接放在对应的内容就可以了 -->
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="layui-div-one">
          <span>关于我们</span>
          <span>
            一群研究客家文化的人，做着客家文化的研究，解决着全世界客家文化的难题却在用着在这个时代很落后的生产力工具。所以，我们想做一点改变”——by客语开发团队
          </span>
          <span>
            我们是一个专业、免费的客家学术社区，旨在为科研工作者提供各种好用的科研工具以及交流平台。
          </span>
          <span> 我们目前提供以下服务： </span>
          <span>
            1.论文搜索
            <br />
            2.文献管理及阅读
            <br />
            3.学术交流
          </span>
          <span>
            论文搜索：除了“搜得到”之外，我们还一站式地提供所有论文相关的信息，让论文的查找/筛选过程变得更高效
          </span>
          <span>
            文献管理及阅读：我们提供了文献管理及阅读的工具并辅以 AI
            的能力，让文献的整理和 PDF 的阅读变得更智能和流畅
          </span>
          <span>
            学术交流：我们提供学术讨论及交流的平台，并且会定期邀请领域大牛来讲解特定的论文，帮助各位科研工作者更方便的进行学习和探讨
          </span>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-div-two">
          <span>联系我们</span>
          <span>可直接添加开发者微信，或者通过开发者加入用户群</span>
          <div class="layui-div-two-img">
            <img src="iconf/one.jpg" alt="">
          </div>
          <span>或者通过邮件联系我们：</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use("element", function () {
      var element = layui.element;

      //…
    });
    const lis = document.querySelectorAll(
      ".layui-tab  .layui-tab-left .layui-tab-title li"
    );
    const spans=document.querySelector(".layui-tab-content .layui-tab-content-span")
    console.log(spans);
    const divs=document.querySelectorAll(".layui-tab-item")
    console.log(divs);
  </script>
</body>

</html>